import { Card, Form, DatePicker, Input, Button, Table, Space } from "antd"
import { useNavigate } from "react-router-dom"
import type { ColumnsType } from "antd/lib/table"
import { SearchOutlined } from "@ant-design/icons"
import { useEffect, useState } from "react"
import { currentPaging } from "@api/user/userInfo"
import { format } from "path"

const RangePicker: any = DatePicker.RangePicker
interface DataType {
  key: React.Key
  name: string
  age: number
  address: string
}

const Index = () => {
  // 定义状态
  let [data, setState] = useState<any>([])
  let [loading, setLoading] = useState<boolean>(false)
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(8)
  const [total, setTotal] = useState()
  const [time, setTime] = useState<any>({})
  const [form] = Form.useForm()
  const navigate = useNavigate()
  // 函数
  const search = async (current: number, size: number, time?: any) => {
    console.log("page", current)

    setLoading(true)
    data = await currentPaging(current, size, time)
    setPage(current)
    setPageSize(size)
    setState(data.records)
    setTotal(data.total)
    setLoading(false)
  }

  // 查找
  const onFinish = (values: any) => {
    // 拿到的values是一个对象，对象内有一个keyword和一个date对象，data中是两个时间，需要先解构
    // 拿到日期相关数据之后判断有的话格式化时间
    const { keyword, date } = values
    const time = {
      keyword,
      createTimeBegin: date && date[0].format("YYYY-MM-DD"),
      createTimeEnd: date && date[1].format("YYYY-MM-DD"),
    }

    setTime({})
    setTime(time)
    search(1, pageSize, time)
  }
  // 挂载
  useEffect(() => {
    search(page, pageSize)
  }, [])

  // 行操作
  const columns: ColumnsType<DataType> = [
    {
      title: "序号",
      key: "index",
      render: (_: any, __: any, index: number) => {
        return index + 1
      },
    },
    {
      title: "手机号",
      key: "phone",
      dataIndex: "phone",
    },
    {
      title: "昵称",
      key: "nickName",
      dataIndex: "nickName",
    },
    {
      title: "姓名",
      key: "name",
      dataIndex: "name",
    },
    {
      title: "状态",
      key: "status",
      dataIndex: "status",
      render: (status: any) => {
        return status ? "正常" : "异常"
      },
    },
    {
      title: "认证状态",
      dataIndex: "authStatus",
      key: "authStatus",
      // 认证状态需要根据值判断
      render: (authStatus: any) => {
        if (authStatus === 2) {
          return "认证成功"
        } else if (authStatus === 1) {
          return "认证中"
        } else {
          return "未认证"
        }
      },
    },
    {
      title: "创建时间",
      dataIndex: "createTime",
      key: "createTime",
    },
    {
      title: "操作",
      key: "operator",
      width: 200,
      render: (text) => (
        <Space size="middle">
          <Button
            type="primary"
            onClick={() => {
              navigate(`/syt/user/userInfo/show/${text.id}`)
            }}
          >
            查看
          </Button>
          <Button type="primary" disabled>
            锁定
          </Button>
        </Space>
      ),
    },
  ]

  return (
    <Card>
      <Form
        layout="inline"
        form={form}
        style={{ marginBottom: 20 }}
        onFinish={onFinish}
      >
        <Form.Item name="keyword">
          <Input placeholder="姓名/手机" />
        </Form.Item>

        <Form.Item label="创建时间" name="date">
          <RangePicker />
        </Form.Item>

        <Form.Item>
          <Button
            type="primary"
            htmlType="submit"
            icon={<SearchOutlined />}
            style={{ marginRight: 20 }}
          >
            查询
          </Button>
          <Button
            onClick={() => {
              form.resetFields()
              setPage(1)
              setPageSize(5)
              search(1, pageSize, {})
            }}
          >
            清空
          </Button>
        </Form.Item>
      </Form>

      {/* 表格 */}

      <Table
        loading={loading}
        columns={columns}
        dataSource={data}
        // 添加key
        rowKey="id"
        // 允许表格出现滚动条
        scroll={{ x: 1500 }}
        // 设置表格边框
        bordered
        // 分页器
        pagination={{
          current: page,
          // 指定每页显示多少条
          pageSize,
          //总共有多少数据， 会根据传入的total计算页数，一页默认十条
          total,

          // 展示动态修改一页多少条数据
          showSizeChanger: true,

          // 指定每页可以显示多少条数据
          pageSizeOptions: ["2", "5", "8"],

          // 是否可以跳转至某页
          showQuickJumper: true,

          // 显示总数据量
          showTotal: (total) => {
            return `一共${total}家医院`
          },
          // 切换页面及pagesize发生改变时发送请求修改页码
          onChange: search,
        }}
      />
    </Card>
  )
}

export default Index
